//
//  DeviceDetailView.swift
//  Kosspot
//
//  Created by 胡辉 on 2025/7/15.
//

import SwiftUI
import UTEBluetoothRYApi

struct DeviceDetailView: View {
    @EnvironmentObject var appState: AppState
    @StateObject var viewModel = DeviceDetailVM()
    @State var device: UTEModelDevice
    
    var body: some View {
        ZStack(alignment: .top) {
            Color(hex: "#0A0A0A")
                .ignoresSafeArea()
            VStack(spacing: 0) {
                ZStack {
                    HStack {
                        Button(action: {
                            appState.navigateBack()
                        }) {
                            Image("back")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 16, height: 16)
                                .padding(.horizontal, 12)
                        }
                        Spacer()
                    }
                    .frame(height: 44)
                    Text(device.name)
                        .font(.system(size: 18, weight: .medium))
                        .foregroundColor(.white)
                }
            }
        }
        .navigationBarHidden(true)
        .onAppear {
            viewModel.getWatchFaceParams()
            viewModel.fetchWatchFaces()
        }
        .onDisappear {
            
        }
    }
}

#Preview {
    DeviceDetailView(device: UTEModelDevice())
}
